<template>
  <div>
    <ThreeSelects
      :category1="category1"
      :category2="category2"
      :category3="category3"
      @category2List="category2List"
      @category3List="category3List"
      @getTableData="getTableData"
    ></ThreeSelects>
    <div class="footer">
      <el-card class="box-card" v-show="!showAddList">
        <el-button type="primary" icon="el-icon-plus" :disabled="disabled" @click="showAddList=true"
          >添加属性</el-button
        >
        <el-table :data="proptiesTableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <!-- 表格元素中的prop是元素遍历的对象，但是表单中prop用于表单校验 -->
          <el-table-column prop="attrName" label="属性名称" width="180">
          </el-table-column>
          <el-table-column prop="attrValueList" label="属性值列表">
            <template slot-scope="{ row, $index }">
              <el-tag
                v-for="item in row.attrValueList"
                :key="item.id"
                type="success"
                effect="plain"
                style="margin: 10px 0px"
              >
                {{ item.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card class="box-card" v-show="showAddList">
        <el-form
          ref="form"
          :model="addListform"
          label-width="80px"
          style="block"
        >
          <el-form-item label="属性名">
            <el-input v-model="addListform.name"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="addProvalue" icon="el-icon-plus" :disabled="addListform.name==''"
            >添加属性值</el-button
          >
          <el-button type="primary" @click="canelAdd">取消</el-button>
        </div>
        <el-table :data="addTableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="valueName" label="属性名称" width="180">
            <template slot-scope="{ row, $index }">
              <el-input
                v-model="row.valueName"
                v-if="row.showInput"
                @blur="row.showInput = false"
              ></el-input>
              <div style="width: 180px" v-else @click="row.showInput = true">
                {{ row.valueName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <el-button
                size="mini"
                type="warning"
                @click="row.showInput = true"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteValue($index, row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="submitValueList" :disabled="addTableData.length==0">保存</el-button>
        <el-button @click="canelAdd">取消</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      proptiesTableData: [], //便利的应该是一个数组
      category1: [],
      category2: [],
      category3: [],
      oneValue: "",
      twoValue: "",
      thirdValue: "",
      disabled: true,
      showAddList: false,
      addListform: {
        name: "", //属性名
      },
      addTableData: [], //新增属性列表
    };
  },
  mounted() {
    this.getCategory1();
  },
  methods: {
    handleEdit(index, row) {
      console.log(row)
      this.showAddList=true;
      this.addListform.name=row.attrName;
      this.addTableData=[...row.attrValueList];
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    async getCategory1() {
      let res = await this.$API.platformproperties.reqCategory1();
      if (res.code == 200) {
        this.category1 = res.data;
      }
    },
    async getCategory2(id) {
      this.oneValue = id;
      let res = await this.$API.platformproperties.reqCategory2(id);
      if (res.code == 200) {
        this.category2 = res.data;
      }
    },
    async getCategory3(id) {
      this.twoValue = id;
      let res = await this.$API.platformproperties.reqCategory3(id);
      if (res.code == 200) {
        this.category3 = res.data;
      }
    },
    category2List(id) {
      this.getCategory2(id);
    },
    category3List(id) {
      this.getCategory3(id);
    },
    async getTableData(id) {
      this.thirdValue = id;
      let { oneValue, twoValue, thirdValue } = this;
      let res = await this.$API.platformproperties.reqGoodsProperties(
        oneValue,
        twoValue,
        thirdValue
      );
      if (res.code == 200) {
        this.proptiesTableData = res.data;
        this.disabled = false;
      }
    },
    addProvalue() {
      this.addTableData.push({ attrId: undefined, valueName: "", showInput: true });
    },
    handleDeleteValue($index, row) {
      this.addTableData = this.addTableData.filter((el) => {
        return el != row;
      });
    },
    async submitValueList() {
      let reqData = {
        attrName: this.addListform.name,
        attrValueList: this.addTableData,
        categoryId: this.thirdValue,
        categoryLevel: 3,
      };
      let res = await this.$API.platformproperties.reqAddAttrInfo(reqData);
      if (res.code == 200) {
        this.$message.success("添加成功");
        this.showAddList=false;
        this.getTableData(this.thirdValue); //重新刷新表单数据
      }
    },
    canelAdd(){
      this.showAddList=false;
      this.addListform={name:''};
      // this.addTableData=[];
    }
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.footer {
  margin: 20px 0px;
}
.el-form-item {
  float: left;
}
.el-table {
  margin: 10px 0px;
}
.el-tag {
  margin: 10px 0px;
}
</style>